import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/components/ye_xiu/login/text_field.dart';
import 'package:flutter_eve_plugin/constants/icon_font.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/login/actions.dart';
import 'package:flutter_eve_plugin/route/main.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/login/main.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/main.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class LoginUserWidget extends StatelessWidget {
  const LoginUserWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(
        converter: (store) => AppStateViewModel(
            state: store.state,
            yeXiuStateViewModel: YeXiuStateViewModel(
                loginStateViewModel: LoginStateViewModel(inputPhone: (phone) {
              store.dispatch(inputPhone(store, phone));
            }))),
        builder: (context, vm) {
          return Container(
            margin: EdgeInsets.only(left: setRatio(29), right: setRatio(29)),
            decoration: ShapeDecoration(
                shape: UnderlineInputBorder(
                    borderSide: BorderSide(
                        color: Color(0xFFE5E5E5),
                        style: BorderStyle.solid,
                        width: setRatio(1)))),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                GestureDetector(
                  onTap: () {
                    Navigator.pushNamed(
                        context, RouteConstant.LoginAreaCodePage);
                  },
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        '+${vm.state.yeXiuState.loginState.areaCode}',
                        style: TextStyle(
                            fontSize: setTextSp(15), color: Color(0xFF333333)),
                        maxLines: 1,
                      ),
                      SizedBox(
                        width: setRatio(14),
                      ),
                      Image.asset(
                        imageUtilYeXiu('login/icon_xiala@2x'),
                        width: setRatio(5),
                        height: setRatio(3),
                      )
                    ],
                  ),
                ),
                Container(
                  width: setRatio(250),
                  child: ITextField(
                    inputText: '${vm.state.yeXiuState.loginState.phone}',
                    deleteIcon: Icon(
                      IconFont.CLEAR,
                      size: setRatio(18),
                      color: Color(0xFFCCCCCC),
                    ),
                    inputBorder: InputBorder.none,
                    keyboardType: ITextInputType.number,
                    hintText: '请输入手机号登录或注册',
                    hintStyle: TextStyle(
                        color: Color(0xFFC2C2C2), fontSize: setTextSp(15)),
                    textStyle: TextStyle(
                        color: Color(0xFF333333), fontSize: setTextSp(15)),
                    fieldCallBack:
                        vm.yeXiuStateViewModel.loginStateViewModel.inputPhone,
                  ),
                )
              ],
            ),
          );
        });
  }
}
